// createStore 是用来创建全局数据的方法
import { createStore } from 'vuex'

// 导入数据持久化操作的函数
import createVuexPersistedState from 'vuex-persistedstate'

/*
    使用 vuex 的时候当页面刷新的时候会导致原有数据恢复到初始状态(数据丢失了)，解决该问题又以下方法
    方法一：将数据手动保存在本地
    方法二：通过插件将数据自动保存在本地
*/

// 创建状态 store 
const store = createStore({
    // 开启严格模式
    strict: true,
    state() {
        return {
            // 放全局状态(数据)的地方
            count: 100,
            // 保存用户的登录信息
            userInfo: {}
        }
    },
    // 放全局状态计算属性的地方
    getters: {},
    // 放唯一修改数据的地方
    mutations: {
        // 这里的方法需用通过 commit 进行触发调用
        add(state) {

            // mutations 中不能使用异步
            // setTimeout(() => {
            //     state.count++
            // }, 100);
            state.count++
        },
        addNum(state, val) {
            state.count += val
        },
        updateUserInfo(state, user) {
            // 保存用户信息
            state.userInfo = user
        }
    },
    // 放异步修改数据的方法
    actions: {
        // 异步处理完成后，需要触发 mutations 中的方法进行修改数据
        addAction(context) {
            setTimeout(() => {
                // 在异步中祥改变数据，要调用同步方法
                context.commit('add')
            }, 1000);

        }
    },
    // 放状态模块用的
    modules: {},
    // 配置数据持久化
    plugins: [
        // 创建一个持久化插件
        createVuexPersistedState({
            reducer: state => {
                return {
                    // 需要持久化的数据
                    userInfo: state.userInfo,
                    count: state.count
                }
            }
        })
    ]
})

// 导出 store
export default store